<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>事件的修饰符</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<style>

    *{
        margin-top: 20px;
    }
</style>

<body>

    <!-- 
        1：Vue中常用的按键别名
            回车 => enter
            删除 => delete (捕获删除和退格键)
            退出 => esc
            空格 => space
            换行 => tab (配合keydown使用)
            上 => up
            下 => dowm
            左 => left
            右 => right
        2：Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意药转换为 kebab-case（短横线命名)
        3：系统修饰键(用法特殊)：ctrl,  alt,    shift,  meta
            配合keyup使用，按下修饰键的同时，再按下其他键，随后释放其他键，事件才被出发
            配合keydown使用  正常触发事件
        4：也可以使用keyCode去指定具体的按键(不推荐)
        5：Vue.config.keyCodes.自定义键名 = 键码  可以去定制按键别名。
     -->

    <div id="root">
        <h1>欢迎来到{{name}}学习键盘事件的使用</h1>
        <br />

        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo1"/>

        <input type="text" placeholder="按下删除提示输入" @keyup.delete="showInfo2"/>

        <input type="text" placeholder="按下退出提示输入" @keyup.esc="showInfo3"/>

        <input type="text" placeholder="按下换行tab  keydown提示输入" @keydown.tab="showInfo4"/>
        <input type="text" placeholder="按下ctrl+y  keyup提示输入" @keyup.ctrl.y="showInfo40"/>
        <input type="text" placeholder="按下ctrl  keydown提示输入" @keydown.ctrl="showInfo41"/>
        <input type="text" placeholder="按下alt  keydown提示输入" @keydown.alt="showInfo42"/>
        <input type="text" placeholder="按下shift  keydown提示输入" @keydown.shift="showInfo43"/>
        <input type="text" placeholder="按下win  keydown提示输入" @keydown.meta="showInfo44"/>

        <input type="text" placeholder="按下上提示输入" @keyup.up="showInfo5"/>

        <input type="text" placeholder="按下下提示输入" @keyup.dowm="showInfo6"/>

        <input type="text" placeholder="按下左提示输入" @keyup.left="showInfo7"/>

        <input type="text" placeholder="按下右提示输入" @keyup.right="showInfo8"/>  
        
        <input type="text" placeholder="按下空格提示输入" @keyup.space="showInfo9"/>
    </div>



    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止 vue在启动时生成生产提示    

        // 创建vue实例
        const x = new Vue({
            el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data: { //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                name: '徐亚远',
                school: {
                    name: "小徐",
                    url: "http://www.baidu.com",
                }
            },
            methods: {
                showInfo1(event) {
                    // if(event.keyCode !== 13) return
                    console.log('键名:' + event.key + '键值：' + event.keyCode)
                    console.log('按下回车提示输入：' + event.target.value)
                },
                showInfo2() {
                    console.log('按下删除提示输入:' + event.target.value)
                },
                showInfo3() {
                    console.log('按下退出提示输入：' + event.target.value)
                },
                showInfo4() {
                    console.log('按下换行提示输入：' + event.target.value)

                },
                showInfo40() {
                    console.log('按下ctrl+y  keyup提示输入' + event.target.value)

                },
                showInfo41() {
                    console.log('按下ctrl  keydown提示输入' + event.target.value)

                },
                showInfo42() {
                    console.log('按下alt  keydown提示输入' + event.target.value)

                },
                showInfo43() {
                    console.log('按下shift  keydown提示输入' + event.target.value)

                },
                showInfo44() {
                    console.log('按下win  keydown提示输入' + event.target.value)

                },
                showInfo5() {
                    console.log('按下上提示输入：' + event.target.value)
                },
                showInfo6() {
                    console.log('按下下提示输入：' + event.target.value)
                },
                showInfo7() {
                    console.log('按下左提示输入：' + event.target.value)

                },
                showInfo8() {
                    console.log('按下右提示输入：' + event.target.value)

                },
                showInfo9() {
                    console.log('按下空格提示输入：' + event.target.value)

                }
            }
        })


    </script>


</body>

</html>